<template>
    <div>
        <div id="printDiv">
            <el-row style="border-bottom: 1px solid #ccc;padding-bottom: 5px;margin-bottom: 10px;">
                <el-col :span="24">{{data.balingCode}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">医院名称：</el-col>
                <el-col :span="12">{{data.hospitalName}}</el-col>
            </el-row>
            <el-row v-if="data.categoryType==2">
                <el-col :span="12">科室：</el-col>
                <el-col :span="12">{{data.departmentName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">进厂批次：</el-col>
                <el-col :span="12">{{data.enterBatchCode}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">打捆时间：</el-col>
                <el-col :span="12">{{data.createTime}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">品类：</el-col>
                <el-col :span="12">{{data.typeName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="24">分类：</el-col>
            </el-row>

            <el-row v-if="data.categoryType==2" class="multiRow" v-for="(item, index) in data.summary" :key="index">
                <el-col :span="6">{{item.categoryName}}</el-col>
                <el-col :span="6">{{item.clothesBarCode}}</el-col>
                <el-col :span="6">{{item.doctorName}}</el-col>
                <el-col :span="6">{{item.clothesCnt}}件</el-col>
            </el-row>
            <el-row v-if="data.categoryType==1 || data.categoryType==3 || data.categoryType==4" class="multiRow" v-for="(item, index) in data.summary" :key="index">
                <el-col :span="8">{{data.typeName}}</el-col>
                <el-col :span="8">{{item.categoryName}}</el-col>
                <el-col :span="8">{{item.count}}</el-col>
            </el-row>

            <el-row style="border-top: 1px solid #ccc;padding-top: 5px;margin-top: 10px;">
                <el-col :span="12">打捆人：{{data.createUserName}}</el-col>
                <!--<el-col :span="12">衣物合计：{{data.clothesCnt}}件</el-col>-->
                <!--<el-col :span="12">缝补合计：{{data.mendCnt}}件</el-col>-->
            </el-row>
            <el-row>
                <el-col :span="12">衣物合计：{{data.clothesCnt}}件</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">缝补合计：{{data.mendCnt}}件</el-col>
            </el-row>
        </div>
        <div style="text-align: center">
            <el-button type="success" @click="confirmPrint">确认</el-button>
        </div>
    </div>
</template>

<script>
  import printJS from 'print-js'

  export default {
    name: 'print',
    props: ['data'],
    data() {
      return {
      }
    },
    created: function() {
    },
    methods: {
      confirmPrint() {
        printJS({
          printable: 'printDiv',
          type: 'html',
          targetStyles: ['*']
        })
      }
    }
  }
</script>

<style scoped>
    .el-row .el-col {
        text-align: center;
    }
    .el-row .el-col:first-child, .el-row .el-col.el-col-24 {
        text-align: left !important;
    }
    .el-row .el-col:last-child {
        text-align: right;
    }
    .multiRow.el-row {
        padding: 0 20px;
    }
</style>
